<template>
    <div>
        <ul class="clearfix" v-if="cartList.length > 0">
            <li class="clearfix b-g-f cart-box" v-for="(item,index) in cartList" :key="index">
                <span class="cart-li-delete">
                    <img src="../../../static/img/delete.png" alt="" @click="cartDelete(item.id)">
                </span>
                <div class="cart-div clearfix">
                    <img v-if="item.checked == false" class="check" src="../../../static/img/check.png" alt="" @click="ischecked(item)">
                    <img v-else class="check" src="../../../static/img/checkTrue.png" alt="" @click="ischecked(item)">
                    <img :src="item.photo_s" alt="">
                    <div class="cart-title-monet">
                        <span class="cart-title">{{item.name}}</span>
                        <div class="cart-money clearfix">
                            <span><em>￥</em>{{item.price}}</span>
                            <img src="../../../static/img/jia.png" alt="" srcset="" @click="addNum(item)">
                            <font>{{item.num}}</font>
                            <img src="../../../static/img/jian.png" alt="" srcset="" @click="reduction(item)">
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <van-submit-bar :price="totalPrice"  :button-text="buttonText" decimal-length="1" @submit="onSubmit" v-if="cartList.length > 0">
            <img v-if="ischeck == false" class="check" src="../../../static/img/check.png" alt="" @click="allChenk(true)">
            <img v-else class="check" src="../../../static/img/checkTrue.png" alt="" @click="allChenk(false)">全选
        </van-submit-bar>
        <div class="null-gwc" v-else>
            <img src="../../../static/img/null-gwc.png" alt="">
            <span class="gwc-tit">购物车空空如也，您可以</span>
            <router-link :to="{name:'index'}" tag="span" class="go-cart">去逛逛</router-link>
        </div>
    </div>
</template>
<script>
import { Dialog, Toast } from 'vant';
export default {
    data(){
        return{
            gwc:true,
            ischeck:false,
            cartList:[],
            checkedGrop:[],
            buttonText:'结算(0)'
        }
    },
    watch:{
        checkedGrop(newVal,oldVal){
            this.buttonText = `结算(${newVal.length})`
            if(newVal.length == this.cartList.length){
                this.ischeck = true
            }else{
                this.ischeck = false
            }
        }
    },
    components:{},
    computed:{
        totalPrice(){
            let total = 0
            this.cartList.forEach(item => {
                if(this.checkedGrop.indexOf(item.id)!== -1){
                    total += item.price*item.num
                }
            })
            return total*100
        }
    },
    mounted(){
        this.cartIndex()
    },
    methods:{
        // 购物车列表
        cartIndex(){
            this.$api.shopping.cartIndex().then(resp=>{
                if(resp.code == 1){
                    this.cartList = resp.data
                    if(this.cartList.length > 0){
                        this.cartList.forEach(element => {
                            element.checked = false
                        })
                    }
                }
            })
        },
        // 商品数量减
        reduction(item){
            if(item.num == 1){
                Toast('已到最小购买数量')
                return 
            }else{
                item.num--
                let parmes = {
                    cart_id:item.id,
                    num:item.num
                }
                this.cartUpCart(parmes)
            }
        },
        // 商品数量家
        addNum(item){
            if(item.num == item.stock_num){
                Toast('已到最大购买数量')
                return 
            }else{
                item.num++
                let parmes = {
                    cart_id:item.id,
                    num:item.num
                }
                this.cartUpCart(parmes)
            }
        },
        // 更新购物车
        cartUpCart(parmes){
            this.$api.shopping.cartUpCart(parmes).then(resp=>{
                if(resp.code == 1){

                }
            })
        },
        // 选中
        ischecked(item){
            this.checkedGrop = []
            this.$set(item,'checked',!item.checked)
            this.$forceUpdate()
            this.cartList.forEach(element => {
                if(element.checked){
                    this.checkedGrop.push(element.id)
                }
            })
        },
        // 全选
        allChenk(type){
            this.cartList.forEach(element => {
                element.checked = type
            })
            this.ischeck = type
            this.$forceUpdate()
            if(type){
                this.cartList.forEach(element => {
                    this.checkedGrop.push(element.id)
                })
            }else{
                this.checkedGrop = []
            }
        },
        // 购物车删除
        cartDelete(id){
            Dialog.confirm({
                title: '标题',
                message: '您确定要删除吗？',
                cancelButtonText:'确定',
                confirmButtonText:'取消'
            }).then(() => {
                // on confirm
            }).catch(() => {
                this.$api.shopping.cartDelete({cart_id:id}).then(resp=>{
                    if(resp.code == 1){
                        this.cartIndex()
                        Toast('删除成功')
                    }else{
                        Toast('删除失败')
                    }
                })
            });
        },
        // 结算
        onSubmit(){
            if(this.checkedGrop.length > 0){
                this.$router.push({
                    name:'pay',
                    query:{
                        total_amount:this.totalPrice / 100,
                        cart_ids:this.checkedGrop.join(',')
                    }
                })
            }else{
                Toast('请先选择商品')
            }
        }
    }
}
</script>
<style lang="less" scoped>
.cart-box{
    padding: 30px;
    border-top: 20px solid #f5f5f5;
    min-height: 220px;
    .cart-li-delete{
        display: block;
        height: 50px;
        img{
            width: 35px;
            height: 40px;
            float: right;
        }
    }
    .cart-div{
        .check{
            width: 36px;
            height: 36px;
            margin-top: 80px;
            margin-right: 20px;
        }
        img{
            width: 219px;
            height: 219px;
            float: left;
        }
        .cart-title-monet{
            height: 220px;
            margin-left: 300px;
            .cart-title{
                margin-top: 20px;
                line-height: 50px;
                height: 100px;
                display: inline-block;
            }
            .cart-money{
                padding-top: 50px;
                height: 45px;
                span{
                    color: #ee2d33;
                    font-weight: bold;
                    font-size: 40px;
                    float: left;
                    em{
                        font-weight: 400;
                        font-size: 40px;
                    }
                }
                img{
                    width: 45px;
                    height: 43px;
                    float: right;
                    cursor: pointer;
                }
                font{
                    float: right;
                    height: 45px;
                    min-width: 60px;
                    line-height: 48px;
                    text-align: center;
                    font-size: 38px;
                }
            }
        }
    }
}
</style>


